<template lang="pug">
.survey-content-container
  .survey-content-header
    .survey-content-title 供应商（制造商）概况
  el-form(:model="form" :rules="surveyRules" ref="surveyRules" label-width="150px" class="form-section-module" size="small")
    .survey-form
      .survey-form-title
        span 基本信息
        label
      .form-section
          el-form-item(label="您的公司全称：" prop="companyName")
            el-autocomplete(placeholder="请输入你公司全称" :popper-append-to-body="false" :fetch-suggestions="querySearchAsync" value-key="companyNameValue" v-model="form.companyName" @select="selectCompany")
            img.company-logo(v-if="form.logo", :src="form.logo")
          el-form-item(label="注册地址：" prop="companyAddress")
            .form-item-flex
              .form-item-address
                el-select(placeholder="请选择省" v-model="form.province" @change="changeAddress('province', 'cityDrop', $event)")
                  el-option(v-for="item in provinceDrop" :key="item.id" :value="item.id" :label="item.name")
              .form-item-address
                el-select(placeholder="请选择市" v-model="form.city" no-data-text="请先选择省" @change="changeAddress('city', 'areaDrop', $event)")
                  el-option(v-for="item in cityDrop" :key="item.id" :value="item.id" :label="item.name")
              .form-item-address
                el-select(placeholder="请选择区" v-model="form.area" no-data-text="请先选择市" @change="changeAddress('area', '', $event)")
                  el-option(v-for="item in areaDrop" :key="item.id" :value="item.id" :label="item.name")
            .form-item-address_input
              el-input(placeholder="请输入您的公司详细地址" v-model="form.detailAddress")
          el-form-item(label="联系方式：" prop="mobile")
            el-input(placeholder="请输入您的公司电话号码" v-model="form.mobile")
          el-form-item(label="电子邮箱：" prop="companyMail")
            el-input(placeholder="请输入您的公司电子邮箱" v-model="form.companyMail")
          el-form-item(label="公司官网：")
            el-input(placeholder="请输入你的公司网址" v-model="form.companyUrl")
          el-form-item(label="统一社会信用代码：" prop="creditCode")
            el-input(placeholder="请输入统一社会信用代码" v-model="form.creditCode")
          el-form-item(label=" 法人名称：" prop="operName")
            el-input(placeholder="请输入法人名称" v-model="form.operName")
          el-form-item(label="注册资金：" prop="registeredFund")
            .form-item-small
              el-input(placeholder="请输入您的注册资金" v-model="form.registeredFund" type="number")
                .form-item-input_ft(slot="suffix") 万元
          el-form-item(label="注册时间：" prop="companyCreateDate")
            .form-item-small
              el-date-picker(placeholder="请选择您的公司注册时间" type="date" value-format="yyyy-MM-dd" v-model="form.companyCreateDate")
          el-form-item(label="经营范围：" prop="businessScope")
            el-input(type="textarea" placeholder="请输入经营范围" v-model="form.businessScope" resize="none" rows="10")
          el-form-item(label="是否为一般纳税人（单选） ：" prop="generalTaxpayer")
            el-radio-group(v-model="form.generalTaxpayer")
              el-radio(v-for="item in dropDwon.generalTaxpayerList" :key="item.dicTypeValueId" :label="item.dicTypeValueId") {{item.dicTypeValue}}
          el-form-item(label="是否需要开票（单选）：" prop="needBilling")
            el-radio-group(v-model="form.needBilling")
              el-radio(v-for="item in dropDwon.needBillingList" :key="item.dicTypeValueId" :label="item.dicTypeValueId") {{item.dicTypeValue}}
    .survey-form
      .survey-form-title
        span 联系信息
        label
      .form-section.form-small-section
        el-form-item(label="企业负责人：" prop="personsInChargeOfCompany")
          el-input(placeholder="请输入企业负责人" v-model="form.personsInChargeOfCompany")
        el-form-item(label="企业负责人电话：" prop="personsInChargeOfCompanyPhone")
          el-input(placeholder="请输入企业负责人电话" v-model="form.personsInChargeOfCompanyPhone")
        el-form-item(label="企业负责人邮箱：" prop="personsInChargeOfCompanyMail")
          el-input(placeholder="请输入企业负责人邮箱" v-model="form.personsInChargeOfCompanyMail")
      .form-section.form-small-section
        el-form-item(label="销售负责人：" prop="saleInChargeOfCompany")
          el-input(placeholder="请输入企业负责人" v-model="form.saleInChargeOfCompany")
        el-form-item(label="企业负责人电话：" prop="saleInChargeOfCompanyPhone")
          el-input(placeholder="请输入企业负责人电话" v-model="form.saleInChargeOfCompanyPhone")
        el-form-item(label="企业负责人邮箱：" prop="saleInChargeOfCompanyMail")
          el-input(placeholder="请输入企业负责人邮箱" v-model="form.saleInChargeOfCompanyMail")
      .form-section.form-small-section
        el-form-item(label="业务负责人：" prop="headOfSales")
          el-input(placeholder="请输入业务负责人" v-model="form.headOfSales")
        el-form-item(label="业务负责人手机号：" prop="headOfSalesPhone")
          el-input(placeholder="请输入业务负责人手机号" v-model="form.headOfSalesPhone")
        el-form-item(label="业务负责人邮箱：" prop="headOfSalesMail")
          el-input(placeholder="请输入业务负责人邮箱" v-model="form.headOfSalesMail")
      .form-section.form-small-section
        el-form-item(label="质量负责人：")
          el-input(placeholder="请输入质量负责人" v-model="form.qualityInChargeOfCompany")
        el-form-item(label="质量负责人手机号：")
          el-input(placeholder="请输入质量负责人手机号" v-model="form.qualityInChargeOfCompanyPhone")
        el-form-item(label=" 质量负责人邮箱：")
          el-input(placeholder="请输入 质量负责人邮箱" v-model="form.qualityInChargeOfCompanyMail")
  .survey-section-footer
    el-button(name="survey" @click="nextStep") 下一步，填写产品销售概况
</template>

<script>
import { getAddres, getSearchEntNameList, getEntBasicDetailByKeyword } from 'api'
export default {
  name: 'surveyModule',
  props: {
    dropDwon: Object,
    parentForm: Object
  },
  data () {
    let validateAddress = (rule, value, callback) => {
      if (!this.form.province || !this.form.city || !this.form.area || !this.form.detailAddress) {
        callback(new Error(rule.message))
      } else {
        callback()
      }
    }
    let validatePhone = (rule, value, callback) => {
      let reg1 = /^1[0-9]\d{9}$/
      let reg2 = /^\d{3,4}\d{7,8}$/
      if (value === '') {
        callback(new Error(rule.message))
      } else {
        if (!reg1.test(value) && !reg2.test(value)) {
          callback(new Error(rule.message))
        }
        callback()
      }
    }
    return {
      form: {
        companyName: '',
        logo: '',
        province: '',
        city: '',
        area: '',
        detailAddress: '',
        mobile: '',
        companyMail: '',
        companyUrl: '',
        creditCode: '',
        operName: '',
        businessScope: '',
        registeredFund: '',
        companyCreateDate: '',
        generalTaxpayer: '', // 是否为一般纳税人，
        needBilling: '',
        personsInChargeOfCompany: '', // 企业负责人
        personsInChargeOfCompanyPhone: '', // 企业负责人电话
        personsInChargeOfCompanyMail: '', // 企业负责人邮箱
        saleInChargeOfCompany: '', // 销售负责人
        saleInChargeOfCompanyPhone: '', // 销售负责人电话
        saleInChargeOfCompanyMail: '', // 销售负责人邮箱
        qualityInChargeOfCompany: '', // 质量负责人
        qualityInChargeOfCompanyPhone: '', // 质量负责人电话
        qualityInChargeOfCompanyMail: '', // 质量负责人邮箱
        headOfSales: '', // 业务联系人
        headOfSalesPhone: '', // 业务联系人电话
        headOfSalesMail: '', // 业务联系人邮箱
      },
      companyList: [],
      provinceDrop: [],
      cityDrop: [],
      areaDrop: [],
      surveyRules: {
        companyName: [
          { required: true, message: '请输入公司全称！', trigger: 'blur' }
        ],
        companyAddress: [
          { required: true, validator: validateAddress, message: '请选择并输入完整地址！', trigger: 'change' }
        ],
        mobile: [
          { required: true, validator: validatePhone, message: '请输入公司电话！', trigger: 'blur' }
        ],
        companyMail: [
          { required: true, message: '请输入公司邮箱！', trigger: 'blur' }
        ],
        companyUrl: [
          { required: true, message: '请输入公司全称！', trigger: 'blur' }
        ],
        creditCode: [
          { required: true, message: '请输入统一社会信用代码！', trigger: 'blur' }
        ],
        operName: [
          { required: true, message: '请输入法人名称！', trigger: 'blur' }
        ],
        businessScope: [
          { required: true, message: '请输入经营范围！', trigger: 'blur' }
        ],
        registeredFund: [
          { required: true, message: '请输入注册资金！', trigger: 'blur' }
        ],
        companyCreateDate: [
          { required: true, message: '请选择成立时间！', trigger: 'change' }
        ],
        generalTaxpayer: [
          { required: true, message: '请选择是否为一般纳税人！', trigger: 'change' }
        ],
        needBilling: [
          { required: true, message: '请选择是否需要开票！', trigger: 'change' }
        ],
        personsInChargeOfCompany: [
          { required: true, message: '请输入企业负责人！', trigger: 'blur' }
        ],
        personsInChargeOfCompanyPhone: [
          { required: true, validator: validatePhone, message: '请输入企业负责人电话！', trigger: 'blur' }
        ],
        personsInChargeOfCompanyMail: [
          { required: true, message: '请输入企业负责人邮箱！', trigger: 'blur' },
          { pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/, message: '邮箱格式错误', trigger: 'blur' },
        ],
        saleInChargeOfCompany: [
          { required: true, message: '请输入销售负责人！', trigger: 'blur' }
        ],
        saleInChargeOfCompanyPhone: [
          { required: true, validator: validatePhone, message: '请输入销售负责人电话！', trigger: 'blur' }
        ],
        saleInChargeOfCompanyMail: [
          { required: true, message: '请输入销售负责人邮箱！', trigger: 'blur' },
          { pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/, message: '邮箱格式错误', trigger: 'blur' },
        ],
        headOfSales: [
          { required: true, message: '请输入业务联系人！', trigger: 'blur' }
        ],
        headOfSalesPhone: [
          { required: true, validator: validatePhone, message: '请输入业务联系人电话！', trigger: 'blur' }
        ],
        headOfSalesMail: [
          { required: true, message: '请输入业务联系人邮箱！', trigger: 'blur' },
          { pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/, message: '邮箱格式错误', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    querySearchAsync (queryString, cb) {
      if (!queryString) return
      this.getCompanyList(cb)
    },
    async getCompanyList (cb) {
      try {
        const { ResultSet } = await this.$axios.post(getSearchEntNameList, { content: { searchName: this.form.companyName } })
        this.companyList = ResultSet.userData.data
        cb(ResultSet.userData.data)
      } catch (err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async selectCompany () {
      try {
        const { ResultSet } = await this.$axios.post(getEntBasicDetailByKeyword, { content: { keyword: this.form.companyName } })
        if (ResultSet.userData && ResultSet.userData.detail) {
          if (ResultSet.userData.detail.companyCreateDate) ResultSet.userData.detail.companyCreateDate = new Date(ResultSet.userData.detail.companyCreateDate).format('yyyy-MM-dd')
          if (ResultSet.userData.detail.province) await this.getAddres('province', 'cityDrop', ResultSet.userData.detail.province)
          if (ResultSet.userData.detail.city) await this.getAddres('city', 'areaDrop', ResultSet.userData.detail.city)
        }
        this.$refs.surveyRules.resetFields()
        this.form = { ...this.form, ...ResultSet.userData.detail }
      } catch (err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    changeAddress (key, pushKey, ev) {
      if (key === 'province') {
        this.form.city = ''
        this.cityDrop = []
        this.form.area = ''
        this.areaDrop = []
      }
      if (key === 'city') {
        this.form.area = ''
        this.areaDrop = []
      }
      this.getAddres(key, pushKey, ev)
    },
    async getAddres (key = 'province', pushKey = 'provinceDrop', id = 0) {
      try {
        if (key !== 'area') {
          const { ResultSet } = await this.$axios.post(getAddres, { content: { id } })
          this[pushKey] = ResultSet.userData.getAddreList
        }
      } catch (err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    nextStep () {
      this.$refs.surveyRules.validate((valid) => {
        if (!valid) {
          this.$message.error('请仔细核对资料填写是否正确！')
          return
        }
        this.$emit('change', { form: this.form, nextRouter: 'sales' })
      })
    }
  },
  created () {
    this.form = { ...this.form, ...this.parentForm }
    this.getAddres()
  }
}
</script>

<style lang="scss" scoped>
.survey-content-container {
  width: 100%;
  background: #fff;
  padding: 25px 22px;
}
.survey-content-header {
  display: flex;
  .survey-content-title {
    padding: 10px 16.5px;
    border-radius: 0 50px 50px 0;
    background: #d7000f;
    font-size: 18px;
    line-height: 26px;
    color: #fff;
  }
}
.survey-form {
  margin-top: 5px;
  .survey-form-title {
    display: flex;
    align-items: center;
    padding: 16px 0;
    span {
      display: inline-block;
      font-size: 16px;
      line-height: 26px;
      padding-right: 10px;
    }
    label {
      height: 1px;
      flex: 1;
      background: #EDEDED;
    }
  }
}
.form-section {
  background: #F6F6F9;
  border-radius: 6px;
  padding: 25px 20px;
  &.form-small-section {
    margin-bottom: 16px;
  }
}
.form-section-module {
  .el-autocomplete {
    width: 100%;
  }
}
.form-item-flex {
  display: flex;
  align-items: center;
}
.form-item-address {
  flex: 1;
  & .el-select {
    width: 100%;
  }
}
.form-item-address_input {
  margin-top: 10px;
}
.form-item-address {
  width: 190px;
  margin-right: 5px;
  & .el-select {
    width: 100%;
  }
}
.survey-section-footer {
  margin-top: 22px;
  padding: 10px 0;
  text-align: center;
}
.form-item-input_ft {
  padding: 0 10px;
  color: #000;
  line-height: 32px;
}
.form-item-small {
  width: 275px;
  .el-date-editor.el-input {
    width: 100%;
  }
}
.company-logo {
  margin-top: 7px;
  height: 75px;
}
</style>